<template>
  <div class="container">
    <div class="header">
      <div class="title-wrapper">
        <div class="blue-line"></div>
        <h3>师德考核</h3>
      </div>
    </div>
    <div class="content-wrapper">
      <!-- 左侧荣誉信息 -->
      <div class="honors-section">
        <div class="honors-icon">
          <img src="@/assets/fileFolder/u6495.png" alt="学校公告">
        </div>
        <div class="honors-list">
          <div>于 2023 年 9 月荣获校级 “师德标兵” 称号</div>
          <div>于 2023 年 6 月荣获市级 “最美教师”</div>
          <div>于 2025 年 4 月荣获省级 “师德楷模” 称号</div>
        </div>
        <div class="rating-section">
          <el-rate 
            v-model="value" 
            show-text 
            :texts="['优秀','优秀','优秀','优秀','优秀']" 
            text-color="red"
            disabled
          ></el-rate>
        </div>
      </div>

      <!-- 中间图表区域 -->
      <div class="chart-section">
        <div id="chartId" ref="chartIdRef" class="echarts-box"></div>
      </div>

      <!-- 右侧评价信息 -->
      <div class="evaluation-section">
        <div class="assessment-date">考核时间：2025年8月27日</div>
        
        <div class="evaluation-content">
          <div class="evaluation-title">
            <img src="@/assets/fileFolder/u6486.png" alt="师德评价">
            <span>师德评价</span>
          </div>
          <div class="evaluation-text">
            <p>该教师师德师风表现尤为突出，始终将“立德树人”作为教育使命的核心，在三尺讲台之上践行着师者仁心的崇高信念。平日里,她视学生如子女般悉心关怀，针对学习困难的学生制定个性化辅导方案，</p>
            <p>凭借多年如一日的坚守与付出，她先后三次荣获校级“师德标兵”称号，两次被评为市级“优秀教育工作者”，其撰写的《课程思政与师德养成的融合实践》案例入选省级德育优秀案例库，成为师生口中“用师德点亮学生人生灯塔”的典范。</p>
            <p class="evaluation-source">———学院师德考核小组</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryEvaluationScoreApi } from '@/api/teacherEthicsConduct'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      value: 4
    }
  },
  mounted() {
    this.initChart()
    // 绑定窗口大小变化事件
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 清理事件监听
    window.removeEventListener('resize', this.handleResize)
    // 销毁图表实例
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chartIdRef)
      queryEvaluationScoreApi().then(res => {
        const option = {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              name: '考核得分',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                // 关闭数值动画
                valueAnimation: false,
                formatter: '{value}'
              },
              data: [
                {
                  value: res.data,
                  name: '得分'
                }
              ]
            }
          ]
        };
        this.chartInstance.setOption(option)
      })
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 16px;
  margin: 12px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.content-wrapper {
  display: flex;
  width: 100%;
}

/* 荣誉区域样式 */
.honors-section {
  flex: 1;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
}

.honors-icon {
  margin-bottom: 16px;
  text-align: center;
}

.honors-icon img {
  width: 140px;
  height: auto;
}

.honors-list {
  margin-bottom: 24px;
  line-height: 1.8;
  color: #555;
}

.rating-section {
  margin-top: 16px;
  text-align: center;
}

/* 图表区域样式 */
.chart-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.echarts-box {
  width: 100%;
  max-width: 440px;
  height: 440px;
}

/* 评价区域样式 */
.evaluation-section {
  flex: 1;
  padding: 16px;
  border-radius: 4px;
}

.assessment-date {
  margin-bottom: 16px;
  color: #666;
  font-size: 14px;
  text-align: right;
}

.evaluation-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  font-weight: bold;
  color: #333;
}

.evaluation-title img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.evaluation-text {
  line-height: 1.8;
  color: #444;
}

.evaluation-text p {
  margin: 0 0 12px 0;
}

.evaluation-source {
  margin-top: 16px;
  text-align: right;
  color: #666;
  font-style: italic;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .chart-section {
    margin: 16px 0;
  }
  
  .echarts-box {
    max-width: 100%;
    height: 250px;
  }
}
</style>